import React, { Component } from 'react'
import css from './App.module.css';
import Head from './components/Header';
import { NavLink,Route } from 'react-router-dom';
import About from './pages/About';
import Home from './pages/Home';
export default class App extends Component {
  render() {
    return (
      <div className={css.routerHead}>
        <Head/>
        <div className={css.flex}>
          <div className={css.routerNav}>
            {/* 如果 路由跳转 有高亮效果 就不可以使用link 需要使用 navlink */}
           {/*  <Link className='list-group-item' to="/about">About</Link>
            <Link className='list-group-item' to="/home">Home</Link> */}
            <NavLink activeClassName='demo' className='list-group-item' to="/about"> About</NavLink>
            <NavLink activeClassName='demo' className='list-group-item' to="/home">Home</NavLink>
          </div>
          <div>
            <Route path="/about" component={About}></Route>
            <Route path="/home" component={Home}></Route>
          </div>
        </div>
        
      </div>
    )
  }
}
